<template>
  <div class="loginpagebox">
    <div class="logobox">
      <div class="l">
        <div class="tit">
          <div class="t-l">
            <img class="img" src="../../assets//img//logo2.png" alt="" />
          </div>
          <div class="t-r">XIMO后台管理项目</div>
        </div>
        <div class="bob">Welcome to ximo</div>
        <el-carousel height="150px" :interval="2000">
          <el-carousel-item>
            <img class="image" :src="img1" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img class="image" :src="img2" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img class="image" :src="img3" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img class="image" :src="img4" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img class="image" :src="img5" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img class="image" :src="img6" alt="" />
          </el-carousel-item>
          <el-carousel-item>
            <img class="image" :src="img7" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="r">
        <div class="rbox">
          <img src="@/assets/img/skin-mediumLight.png" alt="" />
          <div class="wel">欢迎回来！</div>
          <div class="go">让我们一起共创电商新时代</div>
          <el-form ref="ruleFormRef" :model="data" :rules="rules">
            <div class="usern">
              <div class="t">用户名</div>
              <el-form-item prop="username">
                <el-input
                  v-model="data.username"
                  type="text"
                  placeholder="输入用户名"
                />
              </el-form-item>
            </div>
            <div class="usern">
              <div class="t">登录密码</div>
              <el-form-item prop="password">
                <el-input
                  v-model="data.password"
                  type="password"
                  placeholder="输入密码"
                />
              </el-form-item>
            </div>
          </el-form>
          <div style="overflow: hidden">
            <div class="login" @click="gologin">登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import img1 from "@/assets/img/1.png";
import img2 from "@/assets/img/2.png";
import img3 from "@/assets/img/3.png";
import img4 from "@/assets/img/4.png";
import img5 from "@/assets/img/5.png";
import img6 from "@/assets/img/6.png";
import img7 from "@/assets/img/7.png";
import { ref } from "vue";
import type { loginback } from "@/api/type";
import type { MIMA } from "./type";
import { ElMessage, ElNotification, type FormInstance } from "element-plus";
import { getlogin } from "@/api/index";
import { useRouter } from "vue-router";
import userstore from "@/store/user/index";
const useuserstore = userstore();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const data = ref<MIMA>({
  username: "",
  password: "",
});

const validatePass = (_: any, value: string, callback: any): void => {
  if (value.length < 4) {
    return callback(new Error("用户名不少于4位！"));
  }
  callback();
};
const validatePass2 = (_: any, value: string, callback: any): void => {
  if (value.length < 5) {
    return callback(new Error("密码不少于5位！"));
  }
  callback();
};
const rules = {
  username: [{ validator: validatePass, trigger: "blur" }],
  password: [{ validator: validatePass2, trigger: "blur" }],
};
const gologin = async (): Promise<any> => {
  try {
    await ruleFormRef.value?.validate();
    const rudata: loginback = await getlogin(data.value);
    if (rudata.code == 200) {
      useuserstore.userinfo = rudata.data;
      router.replace({ path: "/index" });
      ElNotification({
        type: "success",
        title: "登陆成功！",
        message: "欢迎回来~",
      });
    } else {
      ElNotification({
        type: "error",
        title: "账号或密码错误！",
      });
    }
  } catch (error) {
    ElMessage({
      type: "warning",
      message: "账号密码格式！",
    });
  }
};
</script>

<style scoped lang="scss">
.loginpagebox {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #f3e7e9, #e3eeff);
  .logobox {
    height: 60vh;
    width: 55vw;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    .l {
      height: 100%;
      width: 45%;
      background: url("../../assets//img/VCG41N1402398775.webp");
      position: relative;
      .bob {
        position: absolute;
        bottom: 50px;
        font-size: 30px;
        font-family: "Luckiest Guy";
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .tit {
        position: absolute;
        height: 70px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        .t-r {
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          margin-left: 10px;
        }
        .t-l {
          height: 20px;
          border-radius: 5px;
          width: 65px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-self: center;
          .img {
            height: 90px;
            width: 90px;
            margin-left: -9px;
          }
        }
      }
      :deep(.el-carousel) {
        height: 100%;
        width: 100%;
      }
      :deep(.el-carousel__indicators) {
        display: none;
      }
      :deep(.el-carousel__container) {
        height: 100% !important;
        width: 100% !important;
        .el-carousel__item {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .image {
            height: 400px;
            width: 400px;
          }
        }
      }
    }
    .r {
      height: 100%;
      width: 55%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      .rbox {
        height: 75%;
        width: 55%;
        img {
          height: 1.3vw;
          margin-bottom: 0.2vw;
        }
        .wel {
          font-size: 1.2vw;
        }
        .go {
          font-size: 0.6vw;
          color: #7b7b7b;
          margin-bottom: 2vw;
        }
        .usern {
          width: 100%;
          :deep(.el-input) {
            width: 100%;
            height: 2.2vw;
          }
        }
        .login {
          width: 100%;
          height: 40px;
          background-color: #4c6fff;
          font-size: 0.7vw;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-weight: 700;
          border-radius: 4px;
          margin-top: 50px;
          cursor: pointer;
          user-select: none;
        }
      }
    }
  }
}
</style>
